<template>
  <div class="forum-detail-container">
    <!-- 返回按钮 -->
    <div class="back-section">
      <button class="back-button" @click="goBack" title="返回帖子列表">
        <i class="fas fa-arrow-left"></i>
      </button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner">
        <i class="fas fa-spinner fa-spin"></i>
        <p>正在加载帖子详情...</p>
      </div>
    </div>

    <!-- 帖子详情 -->
    <div v-else-if="invitation" class="forum-post-detail">
      <!-- 顶部信息区 -->
      <div class="post-header-section">
        <!-- 分类标签 -->
        <div class="category-tag">
          {{ invitation.categoryName }}
        </div>
        
        <!-- 帖子标题 -->
        <h1 class="post-title">{{ invitation.postTitle }}</h1>
        
        <!-- 作者与时间栏 -->
        <div class="author-info-bar">
          <div class="author-section">
            <div class="author-avatar" @click="showAuthorCard">
              <i class="fas fa-user-circle"></i>
            </div>
            <div class="author-details">
              <span class="author-name" @click="showAuthorCard">{{ invitation.userName }}</span>
              <span class="publish-time">{{ formatTime(invitation.createTime) }}</span>
            </div>
          </div>
          
          <!-- 作者操作按钮（仅作者可见） -->
          <div v-if="isAuthor" class="author-actions">
            <button class="action-btn edit-btn" @click="editPost">
              <i class="fas fa-edit"></i>
              <span>编辑</span>
            </button>
            <button class="action-btn delete-btn" @click="deletePost">
              <i class="fas fa-trash"></i>
              <span>删除</span>
            </button>
          </div>
        </div>
        
        <!-- 封面图片 -->
        <div v-if="invitation.coverImage" class="cover-image-section">
          <img 
            :src="invitation.coverImage" 
            :alt="invitation.postTitle" 
            @click="previewImage(invitation.coverImage)"
            @error="handleImageError"
            class="cover-image"
          >
        </div>
      </div>

      <!-- 帖子内容区 -->
      <div class="post-content-section">
        <div class="content-text" v-html="formatContent(invitation.postContent)"></div>
      </div>

      <!-- 数据统计栏 -->
      <div class="post-stats-bar">
        <div class="stat-item">
          <i class="fas fa-eye"></i>
          <span class="stat-text">阅读</span>
          <span class="stat-number">{{ formatNumber(invitation.viewCount || 0) }}</span>
        </div>
        <div class="stat-item comment-stat" @click="scrollToComments">
          <i class="fas fa-comment"></i>
          <span class="stat-text">评论</span>
          <span class="stat-number">{{ formatNumber(invitation.commentCount || 0) }}</span>
        </div>
        <div class="stat-item like-stat" :class="{ 'liked': userLiked }" @click="toggleLike">
          <i class="fas fa-heart"></i>
          <span class="stat-text">点赞</span>
          <span class="stat-number">{{ formatNumber(invitation.likeCount || 0) }}</span>
        </div>
      </div>

      <!-- 底部功能区 -->
      <div class="post-action-section">
        <button class="function-btn" @click="sharePost">
          <i class="fas fa-share-alt"></i>
          <span>分享</span>
        </button>
        <button class="function-btn" @click="toggleBookmark">
          <i class="fas fa-bookmark" :class="{ 'bookmarked': userBookmarked }"></i>
          <span>{{ userBookmarked ? '已收藏' : '收藏' }}</span>
        </button>
        <button class="function-btn" @click="reportPost">
          <i class="fas fa-flag"></i>
          <span>举报</span>
        </button>
      </div>

      <!-- 评论区入口 -->
      <div class="comments-entry" @click="scrollToComments">
        <span class="comments-title">查看全部 {{ invitation.commentCount || 0 }} 条评论</span>
        <i class="fas fa-chevron-down"></i>
      </div>

      <!-- 评论区域 -->
      <div class="comments-section" ref="commentsSection">
        <div class="comments-header">
          <h3 class="comments-title">评论区</h3>
          <span class="comments-count">({{ comments.length }})</span>
        </div>
        
        <!-- 发表评论 -->
        <div class="comment-form" v-if="currentUser">
          <div class="comment-input-area">
            <div class="user-avatar">
              <i class="fas fa-user-circle"></i>
            </div>
            <div class="input-wrapper">
              <textarea
                v-model="newComment"
                placeholder="写下你的评论..."
                maxlength="500"
                class="comment-textarea"
                :disabled="commentLoading"
              ></textarea>
              <div class="input-footer">
                <span class="char-count">{{ newComment.length }}/500</span>
                <button 
                  class="submit-comment-btn" 
                  @click="submitComment"
                  :disabled="!newComment.trim() || commentLoading"
                  :class="{ 'loading': commentLoading }"
                >
                  <i v-if="commentLoading" class="fas fa-spinner fa-spin"></i>
                  <span>{{ commentLoading ? '发表中...' : '发表评论' }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div v-else class="login-prompt">
          <p>请先<router-link to="/login" class="login-link">登录</router-link>后再发表评论</p>
        </div>

        <!-- 评论列表 -->
        <div class="comments-list">
          <div v-if="commentsLoading" class="loading-comments">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载评论中...</span>
          </div>
          
          <div v-else-if="comments.length === 0" class="no-comments">
            <i class="fas fa-comment-slash"></i>
            <p>暂无评论，快来抢沙发吧！</p>
          </div>
          
          <div v-else class="comment-list-content">
            <div 
              v-for="comment in comments" 
              :key="comment.id"
              class="comment-item"
            >
              <div class="comment-avatar">
                <i class="fas fa-user-circle"></i>
              </div>
              <div class="comment-body">
                <div class="comment-header">
                  <span class="comment-author">{{ comment.userName }}</span>
                  <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                  <!-- 删除按钮（仅评论作者可见） -->
                  <button 
                    v-if="canDeleteComment(comment)"
                    class="delete-comment-btn"
                    @click="deleteComment(comment.id)"
                    title="删除评论"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
                <div class="comment-content">{{ comment.commentContent || comment.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-state">
      <div class="error-content">
        <i class="fas fa-exclamation-triangle"></i>
        <h3>帖子不存在或已被删除</h3>
        <p>该帖子可能已被作者删除或不存在</p>
        <button class="back-to-list-btn" @click="goBack">返回帖子列表</button>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <div v-if="imagePreview.show" class="image-preview-modal" @click="closeImagePreview">
      <div class="preview-container">
        <img :src="imagePreview.url" :alt="imagePreview.alt">
        <button class="close-preview-btn" @click="closeImagePreview">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>

    <!-- 作者信息卡片 -->
    <div v-if="authorCard.show" class="author-card-modal" @click="closeAuthorCard">
      <div class="author-card" @click.stop>
        <div class="card-header">
          <div class="author-avatar-large">
            <i class="fas fa-user-circle"></i>
          </div>
          <div class="author-info">
            <h4>{{ invitation.userName }}</h4>
            <p>活跃作者</p>
          </div>
          <button class="close-card-btn" @click="closeAuthorCard">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="card-stats">
          <div class="stat">
            <span class="stat-label">发布帖子</span>
            <span class="stat-value">{{ authorCard.postCount }}</span>
          </div>
          <div class="stat">
            <span class="stat-label">获得点赞</span>
            <span class="stat-value">{{ authorCard.totalLikes }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { invitationAPI } from '../services/api';

const route = useRoute();
const router = useRouter();

// 响应式数据
const loading = ref(false);
const likingLoading = ref(false);
const commentLoading = ref(false);
const commentsLoading = ref(false);
const invitation = ref(null);
const comments = ref([]);
const newComment = ref('');
const userLiked = ref(false);
const userBookmarked = ref(false);

// 图片预览
const imagePreview = ref({
  show: false,
  url: '',
  alt: ''
});

// 作者卡片
const authorCard = ref({
  show: false,
  postCount: 0,
  totalLikes: 0
});

// 引用
const commentsSection = ref(null);

// 当前用户信息
const currentUser = computed(() => {
  const userInfo = localStorage.getItem('userInfo');
  return userInfo ? JSON.parse(userInfo) : null;
});

// 是否为作者
const isAuthor = computed(() => {
  return currentUser.value && invitation.value && 
         currentUser.value.name === invitation.value.userName;
});

// 判断是否可以删除评论
const canDeleteComment = (comment) => {
  return currentUser.value && (
    currentUser.value.name === comment.userName || // 评论作者
    currentUser.value.name === invitation.value.userName // 帖子作者
  );
};

// 获取帖子详情
const fetchInvitationDetail = async () => {
  try {
    loading.value = true;
    const postid = parseInt(route.params.id);
    
    // 获取详情（后端会自动增加阅读量）
    const response = await invitationAPI.queryInvitationDetail(postid);
    invitation.value = response.data;
    
    // 获取评论
    await fetchComments();
    
  } catch (error) {
    console.error('获取帖子详情失败:', error);
    showMessage('获取帖子详情失败', 'error');
  } finally {
    loading.value = false;
  }
};

// 获取评论列表
const fetchComments = async () => {
  try {
    commentsLoading.value = true;
    const postid = parseInt(route.params.id);
    const response = await invitationAPI.getCommentsByPostId(postid);
    comments.value = response.data || [];
  } catch (error) {
    console.error('获取评论失败:', error);
    if (!error.message.includes('COMMENT_NOT_EXIST')) {
      showMessage('获取评论失败', 'error');
    }
    comments.value = [];
  } finally {
    commentsLoading.value = false;
  }
};

// 切换点赞状态
const toggleLike = async () => {
  if (!currentUser.value) {
    showMessage('请先登录后再点赞', 'warning');
    router.push('/login');
    return;
  }
  
  try {
    likingLoading.value = true;
    const postid = parseInt(route.params.id);
    
    if (userLiked.value) {
      await invitationAPI.unlikeInvitationOptimistic(postid);
      invitation.value.likeCount = Math.max(0, (invitation.value.likeCount || 0) - 1);
      userLiked.value = false;
      showMessage('已取消点赞', 'success');
    } else {
      await invitationAPI.likeInvitationOptimistic(postid);
      invitation.value.likeCount = (invitation.value.likeCount || 0) + 1;
      userLiked.value = true;
      showMessage('点赞成功', 'success');
    }
  } catch (error) {
    console.error('点赞操作失败:', error);
    showMessage(error.message || '操作失败', 'error');
  } finally {
    likingLoading.value = false;
  }
};

// 提交评论
const submitComment = async () => {
  if (!newComment.value.trim()) {
    showMessage('评论内容不能为空', 'warning');
    return;
  }
  
  if (newComment.value.length > 500) {
    showMessage('评论内容不能超过500字符', 'warning');
    return;
  }
  
  try {
    commentLoading.value = true;
    const postid = parseInt(route.params.id);
    
    await invitationAPI.addCommentandReturn(postid, newComment.value.trim());
    showMessage('评论发表成功', 'success');
    
    newComment.value = '';
    await fetchComments(); // 重新获取评论列表
    
    // 更新评论数
    if (invitation.value) {
      invitation.value.commentCount = (invitation.value.commentCount || 0) + 1;
    }
  } catch (error) {
    console.error('发表评论失败:', error);
    showMessage(error.message || '发表评论失败', 'error');
  } finally {
    commentLoading.value = false;
  }
};

// 删除评论
const deleteComment = async (commentId) => {
  if (!confirm('确定要删除这条评论吗？')) {
    return;
  }
  
  try {
    await invitationAPI.deleteComment(commentId);
    showMessage('评论删除成功', 'success');
    
    // 从列表中移除评论
    comments.value = comments.value.filter(comment => comment.id !== commentId);
    
    // 更新评论数
    if (invitation.value) {
      invitation.value.commentCount = Math.max(0, (invitation.value.commentCount || 0) - 1);
    }
  } catch (error) {
    console.error('删除评论失败:', error);
    showMessage(error.message || '删除评论失败', 'error');
  }
};

// 滚动到评论区
const scrollToComments = () => {
  if (commentsSection.value) {
    commentsSection.value.scrollIntoView({ behavior: 'smooth' });
  }
};

// 分享帖子
const sharePost = () => {
  const url = window.location.href;
  const title = invitation.value.postTitle;
  const text = invitation.value.postContent.substring(0, 100) + '...';
  
  if (navigator.share) {
    navigator.share({ title, text, url });
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(url).then(() => {
      showMessage('链接已复制到剪贴板', 'success');
    }).catch(() => {
      showMessage('分享链接：' + url, 'info');
    });
  }
};

// 切换收藏状态
const toggleBookmark = () => {
  if (!currentUser.value) {
    showMessage('请先登录后再收藏', 'warning');
    router.push('/login');
    return;
  }
  
  userBookmarked.value = !userBookmarked.value;
  showMessage(userBookmarked.value ? '收藏成功' : '已取消收藏', 'success');
};

// 举报帖子
const reportPost = () => {
  if (!currentUser.value) {
    showMessage('请先登录后再举报', 'warning');
    router.push('/login');
    return;
  }
  
  if (confirm('确定要举报这个帖子吗？')) {
    showMessage('举报已提交，我们会尽快处理', 'success');
  }
};

// 编辑帖子
const editPost = () => {
  router.push(`/edit-invitation/${invitation.value.id}`);
};

// 删除帖子
const deletePost = async () => {
  if (!confirm('确定要删除这个帖子吗？删除后无法恢复。')) {
    return;
  }

  try {
    await invitationAPI.deleteInvitation(invitation.value.id);
    showMessage('删除成功', 'success');
    router.push('/invitations');
  } catch (error) {
    console.error('删除失败:', error);
    showMessage(error.message || '删除失败', 'error');
  }
};

// 显示作者卡片
const showAuthorCard = () => {
  // 模拟获取作者统计数据
  authorCard.value.postCount = Math.floor(Math.random() * 50) + 1;
  authorCard.value.totalLikes = Math.floor(Math.random() * 500) + 10;
  authorCard.value.show = true;
};

// 关闭作者卡片
const closeAuthorCard = () => {
  authorCard.value.show = false;
};

// 预览图片
const previewImage = (url, alt = '') => {
  imagePreview.value = {
    show: true,
    url,
    alt
  };
};

// 关闭图片预览
const closeImagePreview = () => {
  imagePreview.value.show = false;
};

// 返回列表
const goBack = () => {
  router.push('/invitations');
};

// 格式化内容（支持图片渲染和换行）
const formatContent = (content) => {
  if (!content) return '';
  
  // 处理换行
  let formatted = content.replace(/\n/g, '<br>');
  
  // 处理图片链接（简单的URL检测）
  const imageRegex = /(https?:\/\/[^\s]+\.(jpg|jpeg|png|gif|webp))/gi;
  formatted = formatted.replace(imageRegex, '<img src="$1" alt="图片" class="content-image" onclick="previewImage(\'$1\')">');
  
  return formatted;
};

// 格式化时间
const formatTime = (time) => {
  if (!time) return '';
  const date = new Date(time);
  const now = new Date();
  const diff = now - date;
  
  // 时间差处理
  const minutes = Math.floor(diff / (1000 * 60));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  
  if (minutes < 1) return '刚刚';
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;
  
  return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' });
};

// 格式化数字
const formatNumber = (num) => {
  if (num < 1000) return num.toString();
  if (num < 10000) return (num / 1000).toFixed(1) + 'k';
  return (num / 10000).toFixed(1) + 'w';
};

// 处理图片错误
const handleImageError = (e) => {
  e.target.style.display = 'none';
  const parent = e.target.parentNode;
  if (parent) {
    parent.innerHTML = '<div class="image-error"><i class="fas fa-image"></i><span>图片加载失败</span></div>';
  }
};

// 消息提示（简单实现，可替换为Element Plus）
const showMessage = (message, type = 'info') => {
  // 创建消息元素
  const messageEl = document.createElement('div');
  messageEl.className = `message-toast message-${type}`;
  messageEl.textContent = message;
  
  // 样式
  Object.assign(messageEl.style, {
    position: 'fixed',
    top: '20px',
    right: '20px',
    padding: '12px 20px',
    borderRadius: '6px',
    color: 'white',
    fontSize: '14px',
    zIndex: '9999',
    backgroundColor: type === 'success' ? '#52c41a' : 
                    type === 'warning' ? '#faad14' : 
                    type === 'error' ? '#ff4d4f' : '#1890ff'
  });
  
  document.body.appendChild(messageEl);
  
  // 3秒后移除
  setTimeout(() => {
    if (messageEl.parentNode) {
      messageEl.parentNode.removeChild(messageEl);
    }
  }, 3000);
};

// 组件挂载时获取数据
onMounted(() => {
  fetchInvitationDetail();
});
</script>

<style scoped>
/* 整体容器 */
.forum-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  padding-left: 280px;
  padding-right: 40px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 返回按钮 */
.back-section {
  margin-bottom: 20px;
}

.back-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #42b983;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.3);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: #369870;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 185, 131, 0.4);
}

/* 加载状态 */
.loading-container {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  text-align: center;
  color: #666;
}

.loading-spinner i {
  font-size: 32px;
  margin-bottom: 15px;
  color: #42b983;
}

.loading-spinner p {
  margin: 0;
  font-size: 16px;
}

/* 帖子详情主体 */
.forum-post-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 顶部信息区 */
.post-header-section {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 分类标签 */
.category-tag {
  display: inline-block;
  background: #e8f4fd;
  color: #1890ff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 15px;
  border: 1px solid #d4e8fc;
}

/* 帖子标题 */
.post-title {
  font-size: 22px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 20px 0;
  line-height: 1.4;
  word-break: break-word;
}

/* 作者与时间栏 */
.author-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.author-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.author-avatar:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  cursor: pointer;
  transition: color 0.3s ease;
}

.author-name:hover {
  color: #1890ff;
}

.publish-time {
  font-size: 14px;
  color: #8c8c8c;
}

/* 作者操作按钮 */
.author-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  color: #595959;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

.edit-btn:hover {
  border-color: #52c41a;
  color: #52c41a;
}

.delete-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* 封面图片区域 */
.cover-image-section {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cover-image:hover {
  transform: scale(1.02);
}

/* 帖子内容区 */
.post-content-section {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #262626;
  word-break: break-word;
}

/* 数据统计栏 */
.post-stats-bar {
  display: flex;
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  gap: 40px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #595959;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 8px;
}

.stat-item:hover {
  background: #f5f5f5;
  color: #262626;
}

.stat-item i {
  font-size: 18px;
}

.comment-stat:hover,
.like-stat:hover {
  color: #1890ff;
}

.like-stat.liked {
  color: #ff4757;
}

.like-stat.liked:hover {
  color: #ff3742;
}

.stat-text {
  font-weight: 500;
}

.stat-number {
  font-weight: 600;
  margin-left: 4px;
}

/* 底部功能区 */
.post-action-section {
  display: flex;
  justify-content: center;
  gap: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.function-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #595959;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.function-btn:hover {
  border-color: #40a9ff;
  color: #40a9ff;
  background: #f6fbff;
}

.function-btn i.bookmarked {
  color: #faad14;
}

/* 评论区入口 */
.comments-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.comments-entry:hover {
  background: #f9f9f9;
}

.comments-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.comments-entry i {
  color: #8c8c8c;
  transition: transform 0.3s ease;
}

.comments-entry:hover i {
  transform: translateY(2px);
}

/* 评论区域 */
.comments-section {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.comments-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #42b983;
}

.comments-header .comments-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0;
}

.comments-count {
  font-size: 16px;
  color: #8c8c8c;
}

/* 评论表单 */
.comment-form {
  margin-bottom: 30px;
}

.comment-input-area {
  display: flex;
  gap: 15px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18px;
  flex-shrink: 0;
}

.input-wrapper {
  flex: 1;
}

.comment-textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.comment-textarea:focus {
  outline: none;
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.char-count {
  font-size: 12px;
  color: #8c8c8c;
}

.submit-comment-btn {
  padding: 8px 20px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.submit-comment-btn:hover:not(:disabled) {
  background: #369870;
}

.submit-comment-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}

/* 登录提示 */
.login-prompt {
  text-align: center;
  padding: 30px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 30px;
}

.login-link {
  color: #1890ff;
  text-decoration: none;
  font-weight: 500;
}

.login-link:hover {
  text-decoration: underline;
}

/* 评论列表 */
.loading-comments {
  text-align: center;
  padding: 40px;
  color: #8c8c8c;
}

.no-comments {
  text-align: center;
  padding: 60px 20px;
  color: #bfbfbf;
}

.no-comments i {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
}

.comment-list-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 16px;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
}

.comment-author {
  font-weight: 500;
  color: #262626;
  font-size: 14px;
}

.comment-time {
  font-size: 12px;
  color: #8c8c8c;
}

.delete-comment-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #bfbfbf;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.delete-comment-btn:hover {
  color: #ff4d4f;
  background: #fff2f0;
}

.comment-content {
  color: #595959;
  line-height: 1.6;
  font-size: 14px;
  word-break: break-word;
}

/* 错误状态 */
.error-state {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 60px 40px;
  text-align: center;
}

.error-content i {
  font-size: 64px;
  color: #ff9c6e;
  margin-bottom: 20px;
  display: block;
}

.back-to-list-btn {
  background: #42b983;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.back-to-list-btn:hover {
  background: #369870;
}

/* 图片预览弹窗 */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}

.preview-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.preview-container img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.close-preview-btn {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #262626;
  transition: all 0.3s ease;
}

.close-preview-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

/* 作者信息卡片 */
.author-card-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: pointer;
}

.author-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  cursor: default;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .forum-detail-container {
    padding: 15px;
  }
  
  .post-header-section,
  .post-content-section,
  .comments-section {
    padding: 20px;
  }
  
  .post-title {
    font-size: 18px;
  }
  
  .author-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .post-stats-bar {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }
  
  .post-action-section {
    flex-direction: column;
    gap: 10px;
  }
  
  .function-btn {
    justify-content: center;
  }
  
  .comment-input-area {
    flex-direction: column;
    gap: 10px;
  }
}
</style>